import { Button, Grid, IndexBar, List, SearchBar } from "antd-mobile";
import React, { useEffect, useState } from "react";
import axios from "../../utils/index";
import { setName } from "../../store/home/home";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
function Index() {
  const [list, setList] = useState([]);
  const getData = async () => {
    const resp = await axios.get("/city");
    console.log(resp.data.data);
    setList(resp.data.data);
  };
  useEffect(() => {
    getData();
  }, []);
  const [isasdasd,setIsasdasd]=useState(false)
  const [data,setData]=useState([])

  const onSearch=async(value)=>{
    const res=await axios.get('/city/search',{params:{wd:value}})
    console.log(res);
    setData(res.data.data)
    setIsasdasd(true)
    // setQwe(qwe.concat(value))
  }
  // const [qwe,setQwe]=useState(JSON.parse(localStorage.getItem("qwe"))||[])
  
  // useEffect(()=>{
  //   localStorage.setItem('qwe',JSON.stringify(qwe))
  // },[qwe])
 const dispatch=useDispatch()
 const naviagte=useNavigate()
 const dian=(value)=>{
  dispatch(setName(value))
  naviagte(-1)
 }
  return (
    <div>
      <SearchBar onSearch={onSearch} placeholder="请输入内容" />
      <div>
        {
          isasdasd?<div>
              {
                data.map((v,i)=>{
                  return (
                    <Button onClick={()=>dian(v.name)} key={i}>{v.name}</Button>
                  )
                })
              }
          </div>:<div>
          <div>
            <h2>历史记录</h2>
              {/* {
                qwe.map((v,i)=>{
                  return (
                    <Button key={i}>{v}</Button>
                  )
                })
              } */}
          </div>
          <div style={{ height: window.innerHeight }}>
            <div>
              热门城市
              <Grid columns={4} gap={8}>
                {list.hotCities?.map((v, i) => {
                  return (
                    <Grid.Item>
                      <div key={i}>
                        <button onClick={()=>dian(v.name)}>{v.name}</button>
                      </div>
                    </Grid.Item>
                  );
                })}
              </Grid>
            </div>
            <IndexBar>
              {list.cityList?.map((group) => {
                const { title, citys } = group;
                return (
                  <IndexBar.Panel
                    index={title}
                    title={`标题${title}`}
                    key={`标题${title}`}
                  >
                    <List>
                      {citys.map((item, index) => (
                        <List.Item key={index} onClick={()=>dian(item.name)}>{item.name}</List.Item>
                      ))}
                    </List>
                  </IndexBar.Panel>
                );
              })}
            </IndexBar>
          </div>
        </div>
        }
      </div>
      
    </div>
  );
}

export default Index;
